<template>
  <transition mode="out-in">
    <MDragbleBox ref="draw_box" class="dragble-box no-select" :option="{}" groupName="window">
      <!-- 桌面内容-->
      <div slot="background" class="windowConfig winDesktop"
           @click="setActiveAppIndex(-1)">
        <!-- 桌面图标 -->
        <section class="flex-grid--column desktop-grid">
          <article v-for="(item, index) in $store.getters.desktopLinks" class="grid-item">
            <div class="grid-icon-wrap" @click.stop="" @dblclick="$store.commit('openApp', item)">
              <div class="icon"
                   :style="{background: 'url(' +item.icon +') no-repeat center center', backgroundSize: 'cover'}"></div>
              <p class="h5 g-ft--wrap title">{{item.title}}</p>
            </div>
          </article>
        </section>
        <!-- 任务栏 -->
        <task-bar @setActiveAppIndex="setActiveAppIndex"
                  @setAppListWindowActive="setAppListWindowActive"
        ></task-bar>
      </div>
      <!-- 已打开窗口-->
      <template v-for="(app, index)  in $store.getters.openAppList">
        <MDragbleItem v-show="appListWindowActive && app.show" :key="index" :index="index"
                      @active="setActiveAppIndex(index)"
                      groupName="window" :option="app.winOption">
          <div @mouseup="setActiveAppIndex(index)">
            <appWindow
                @setActiveAppIndex="setActiveAppIndex"
                :key="index"
                :index="index" :option="app"
                :windowSizeType="app.windowSizeType"
                :active="$store.getters.activeAppIndex === index"
            >
            </appWindow>
          </div>
        </MDragbleItem>
      </template>
    </MDragbleBox>
  </transition>
</template>

<script>
  // 拖拽封装
  import MDragbleBox from '../../components/mdragble/DragBox';
  import MDragbleItem from '../../components/mdragble/DragItem';
  // 任务栏
  import taskBar from './bar/TaskBar';
  // 应用窗口
  import appWindow from '@/page/Apps/AppWindow.vue';
  // 混合
  import mixinGlobal from '@/mixin/global';

  export default {
    name: "winDesktop",
    components: {taskBar, appWindow, MDragbleBox, MDragbleItem},
    mixins: [mixinGlobal],
    data() {
      return {
        /* 拖动配置 */
        // 是否显示应用窗口
        appListWindowActive: true,
      }
    },
    mounted() {
      // 取消鼠标右击事件
      document.oncontextmenu = function (e) {
        e.preventDefault();
      };
    },
    methods: {
      // 设置活动窗口
      setActiveAppIndex(index) {
        if (index >= 0) {
          this.setAppListWindowActive(true);
        }
        this.$store.commit('activeAppIndex', index);
      },
      // 隐藏
      setAppListWindowActive(active) {
        this.appListWindowActive = active;
      },
    },
    computed: {}
  }
</script>

<style>
  .v-enter, .v-leave-to {
    opacity: 0.3;
    /*transform: translateX(150px);*/
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s ease;
  }

  .windowConfig {
    & .h5 {
      color: var(--ft_color);
    }
  }
</style>
<style scoped>
  .winDesktop {
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background: url(/static/image/system/background/win10_background1.jpg) no-repeat center center;
    background-size: cover;
  }

  .dragble-box {
    overflow: hidden;
  }

  /* 网格布局 */
  .desktop-grid {
    overflow: hidden;
    padding: 10px 20px;

    /* 网格中的单元格 */

    & .grid-item {
      width: 120px;
      height: 120px;
      text-align: center;
    }

    /* 图标元素 */

    & .grid-icon-wrap {
      position: relative;
      width: 100%;
      height: auto;
      padding: 5px 20px 5px 10px;
      border-radius: 2px;
      cursor: pointer;
    }

    & .grid-icon-wrap:hover {
      z-index: 1;
      background: rgba(255, 255, 255, 0.11);
    }

    /* 图标 */

    & .icon {
      width: 60px;
      height: 60px;
      margin: 0 auto;
      border: 1px solid;
    }

    /* 图标下文字 */

    & .title {
      line-height: 20px;
      height: 40px;
      overflow: hidden;
      text-shadow: 1px 1px 1px black;
      text-align: center;
    }

    & .grid-item:hover {
      & .title {
        min-height: 40px;
        height: auto;
        overflow: initial;
      }
    }
  }
</style>
